<template>
	<el-dialog v-model="visible" title="更新商品" width="80%" :before-close="handleClose">
		<el-form ref="formTableRef" size="small" :model="formTable" :rules="rules" :inline="true">
			<el-table class="form-table" :data="formTable.skus" row-key="skuName">
				<el-table-column min-width="200" prop="alipayCode" label="支付宝规格ID" align="center"></el-table-column>
				<el-table-column min-width="60" prop="id" label="规格ID" align="center"> </el-table-column>
				<el-table-column min-width="150" prop="skuName" label="规格" align="center"> </el-table-column>
				<el-table-column min-width="100" prop="skuImage" label="规格图片" align="center">
					<template #default="{ row }">
						<el-image v-if="row.skuImage" style="width: 40px; height: 40px; flex-shrink: 0" fit="cover" :src="row.skuImage"></el-image>
						<span v-else>--</span>
					</template>
				</el-table-column>
				<el-table-column min-width="150" prop="presentPrice" label="规格价格(元)" align="center">
					<template #header>
						<span class="table-is-required">规格价格(元)</span>
					</template>
					<template #default="{ row, $index }">
						<el-form-item :prop="`skus[${$index}].presentPrice`" :label-width="1" style="width: 80%; max-width: 150px">
							<el-input-number :precision="2" :controls="false" :min="0" :max="99999.99" v-model="row.presentPrice" :step="0" />
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column min-width="150" prop="originalPrice" label="划线价" align="center">
					<template #header>
						<span class="table-is-required">划线价</span>
					</template>
					<template #default="{ row, $index }">
						<el-form-item :prop="`skus[${$index}].originalPrice`" :label-width="1" style="width: 80%; max-width: 150px">
							<el-input-number :precision="2" :controls="false" :min="0" :max="99999.99" v-model="row.originalPrice" :step="0" />
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column min-width="150" prop="inventory" label="库存" align="center">
					<template #header>
						<span class="table-is-required">库存</span>
					</template>
					<template #default="{ row, $index }">
						<el-form-item :prop="`skus[${$index}].inventory`" :label-width="1" style="width: 80%; max-width: 150px">
							<el-input-number :precision="0" :controls="false" :min="0" :max="9999999" v-model="row.inventory" :step="1" />
						</el-form-item>
					</template>
				</el-table-column>
			</el-table>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleClose">取消</el-button>
				<el-button type="primary" :loading="submitLoading" v-debounce="submit">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="tsx">
import { FormRules, ElMessage } from 'element-plus';
import { ref, reactive, watch, computed, onMounted } from 'vue';
import { fetchUpdateSync, fetchSnycDetail } from '/@/api/goods';
import { fenToYuan } from '/@/utils/commonFunction';

const props = defineProps({
	// 列表内容
	visible: {
		type: Boolean,
		default: () => false,
	},
	row: {
		type: Object,
		default: () => null,
	},
});

const emit = defineEmits(['handleClose']);

watch(
	() => props.visible,
	(val) => {
		visible.value = val;
		if (val) {
			getList();
		}
	}
);

const formTableRef = ref();
const formTable = ref<any>({
	skus: [],
});

const submitLoading = ref(false);

const getList = async () => {
	const { data } = await fetchSnycDetail({ id: props.row.id });

	formTable.value = {
		...data.product,
		skus: data.product.skus
			? data.product.skus.map((v: any) => {
					return {
						...v,
						originalPrice: fenToYuan(v.originalPrice),
						presentPrice: fenToYuan(v.presentPrice),
						recommendedPrice: fenToYuan(v.recommendedPrice),
						costPrice: fenToYuan(v.costPrice),
					};
			  })
			: [],
	};
};

const visible = ref(false);

//校验规则
const rules = reactive<FormRules<any>>({
	categoryId: [{ required: true, trigger: 'blur', message: '平台类目不能为空' }],
	shippingTimeLimit: [{ required: true, message: '发货时效不能为空', trigger: ['change', 'blur'] }],
});

const submit = async () => {
	formTableRef.value.validate(async (valid: any) => {
		if (valid) {
			submitLoading.value = true;
			try {
				const res = await fetchUpdateSync({
					itemId: formTable.value.alipayCode,
					productStatus: props.row.productStatus,
					productId: props.row.id,
					skus: formTable.value.skus.map((v: any) => ({
						...v,
						originalPrice: v.originalPrice * 100,
						salePrice: v.presentPrice * 100,
					})),
				});
				submitLoading.value = false;

				if (res.code == 200) {
					handleClose(true);
				}
			} catch (error) {
				submitLoading.value = false;
			}
		}
	});
};

const handleClose = (success?: boolean) => {
	formTable.value = {};
	if (formTableRef.value) {
		formTableRef.value.resetFields();
	}
	emit('handleClose', success === true);
};
</script>

<style lang="scss">
.sync-form {
	.el-form-item {
		width: 100%;
	}
}
</style>
